<template>
	<el-container>
		<el-header style="height: auto;">
			<sc-select-filter :data="filterData" :label-width="80"></sc-select-filter>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="list.apiObj" row-key="id" remoteSort>
				<el-table-column label="货品编码" prop="product_id" width="300"></el-table-column>
				<el-table-column label="类别" prop="category" width="150"></el-table-column>
				<el-table-column label="品牌" prop="brand" width="250"></el-table-column>
				<el-table-column label="品名" prop="name" width="150"></el-table-column>
				<el-table-column label="产品单价" prop="price" width="150" sortable='custom'></el-table-column>
				<el-table-column label="库存数" prop="total_warehouse" width="150"></el-table-column>
				<el-table-column label="样图" width="160">
					<template v-slot="scope">
						<el-popover placement="top-start" trigger="hover">
							<template #reference>
								<el-image :src="baseURL+scope.row.sample_png.replace(baseURL,'')" alt="无样图"
										  class="scopeImg"
										  style="width: 70px; height: 70px">
									<template #error>
										<div class="image-slot">
											<i class="el-icon-picture-outline"></i>
										</div>
									</template>
								</el-image>
							</template>
							<el-image :src="baseURL+scope.row.sample_png.replace(baseURL,'')" alt="无样图"
									  style="width: 300%; height: 300%"></el-image>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column label="备注" prop="desc" width="160"></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="160">
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
</template>

<script>
import config from "@/config"
import scSelectFilter from '@/components/scSelectFilter'

export default {
	name: "product",
	components: {
		scSelectFilter
	},
	data() {
		return {
			baseURL: config.API_URL1,
			filterData: [
				{
					title: "类别",
					key: "category",
					multiple: false,
					options: [
						{
							label: "全部",
							value: ""
						},
					]
				},
				{
					title: "品牌",
					key: "brand",
					multiple: false,
					options: [
						{
							label: "全部",
							value: ""
						},
					]
				}
			],
			list: {
				apiObj: this.$API.products.list
			},
		}
	},
	methods: {
		async get_category_list() {
			var category_list = await this.$API.products.category_list.get()
			this.filterData[0]["options"] = [{label: "全部", value: ""}]
			for (const categoryListElement of category_list) {
				this.filterData[0]["options"].push(
					{
						label: categoryListElement,
						value: categoryListElement
					},
				)
			}
		},
		async get_brand_list() {
			var brand_list = await this.$API.products.brand_list.get()
			this.filterData[1]["options"] = [{label: "全部", value: ""}]
			for (const brandListElement of brand_list) {
				this.filterData[1]["options"].push(
					{
						label: brandListElement,
						value: brandListElement
					},
				)
			}
		},
	},
	created() {
		this.get_category_list()
		this.get_brand_list()
	},
}
</script>

<style scoped>

</style>
